<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
		<title></title>
		<include file="public/wx_share" />
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/cellar/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/cellar/style-cj.css"/>
		<link rel="stylesheet" href="__STATIC__/css/cellar/public_fontsize.css" />
		<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
		

	</head>

	<body>
		<div class="main">
			<div class="banner"><img src="/public/images/dial/banner.png" /></div>
			<div class="main-header">
				<p>当前银酒币数量:<span class="coud_num">{$pay_points}</span></p>
				<!--<p class="p1">您有<span class="coud_num">30</span>次机会</p>-->
			</div>
			<div class="main-body">
				<div id="zhuanpan">
					<img id="img" class="rotary-table" src="/public/images/dial/dazhuanp.png">
					<img id="tip" class="point i_cont" src="/public/images/dial/Pointer1.png">
				</div>
			</div>

			<div class="main-footer">
				<a href="{:U('/mobile/index/dial_record')}" class="footer-a2">中奖记录>></a>
				<a href="#" class="footer-a" data-toggle="modal" data-target="#myModal">活动规则>></a>
			</div>

		</div>
		<!-- 长征纪念酒138 -->
		<div id="apply1" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog modal-content">
				<div class="modal-body">
					<div class="img1"><img src="/public/images/dial/png1.png" /></div>
					<p><span>奖品将在两个工作日内邮寄，请留意查收！</span></p>
					<a href="#" class="colse1" data-dismiss="modal"></a>
					<button type="button" class="but5" data-dismiss="modal" data-toggle="modal">确定</button>
				</div>
			</div>
		</div>

		<!--上品100 88 -->
		<div id="apply2" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog modal-content">
				<div class="modal-body">
					<div class="img1"><img src="/public/images/dial/png2.png" /></div>
					<p><span>奖品将在两个工作日内邮寄，请留意查收！</span></p>
					<a href="#" class="colse1" data-dismiss="modal"></a>
					<button type="button" class="but5" data-dismiss="modal" data-toggle="modal">确定</button>
				</div>
			</div>
		</div>
		<!--红包1-5元 -->
		<div id="apply3" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog modal-content">
				<div class="modal-body">
					<div class="img1" style="position: relative;">
						<img src="/public/images/dial/png3.png" />
						<span class="fs_xi" id="price" style="position: absolute;left: 7em;top:45%;color: red;">1.80元</span>
					</div>
					<p><span>奖品已发放，请留意查收！</span></p>
					<a href="#" class="colse1" data-dismiss="modal"></a>
					<button type="button" class="but5" data-dismiss="modal" data-toggle="modal">确定</button>
				</div>
			</div>
		</div>
		<!--500银酒币 -->
		<div id="apply4" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog modal-content">
				<div class="modal-body">
					<div class="img1"><img src="/public/images/dial/png4.png" /></div>
					<p><span>奖品已发放，请留意查收！</span></p>
					<a href="#" class="colse1" data-dismiss="modal"></a>
					<button type="button" class="but5" data-dismiss="modal" data-toggle="modal">确定</button>
				</div>
			</div>
		</div>
		<!--500银酒币 -->
		<div id="apply5" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog modal-content">
				<div class="modal-body">
					<div class="img1"><img src="/public/images/dial/png5.png" /></div>
					<p><span>奖品已发放，请留意查收！</span></p>
					<a href="#" class="colse1" data-dismiss="modal"></a>
					<button type="button" class="but5" data-dismiss="modal" data-toggle="modal">确定</button>
				</div>
			</div>
		</div>
		<!--加载-->
		<div id="applyLoading" class="modal fade" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog modal-content">
				<div class="modal-body">
					<div class="loading-container" align="center">
						<img src="/public/images/dial/ajax-loader.gif" alt="Loading" class="loading-gif">
					</div>
					<p align="center">后台在努力加载，稍等一会儿哦~</p>
				</div>
			</div>
		</div>

		<!-- 温馨提示 -->
		<div id="myModal" class="modal fade s3" tabindex="-1" data-replace="true" data-backdrop="static">
			<div class="modal-dialog">
				<div class="hd-title"></div>
				<a href="#" class="close2"></a>
				<div class="modal-body" style="height: 250px; overflow: auto;">

					<p>1、活动时间：2017年6月12日——2017年12月31日。<br/> 2、活动期间，用户可以使用500银酒币进行一次抽奖，不足500银酒币不能进行抽奖。
						<br/> 3、抽奖奖池,一等奖:53°茅台珍藏纪念红军长征80周年酒、二等奖:52°五粮液100年传奇上品酒、三等奖:现金红包、四等奖:500银酒币、五等奖:100银酒币。
						<br/> 5、实物奖品将在两个工作日内配送，请注意查收。现金红包和银酒币将立即发放到用户钱包余额中。<br/>
						<span>备注：本活动最终解释权归封坛天下运营中心所有。 </span></p>

				</div>

			</div>
		</div>

		<script type="text/javascript">
			/* 获取抽奖机会值*/
			var nun1 = $(".coud_num").html();
			var rotate = {
				rotate_angle: 0, //起始位置为0
				flag_click: true, //转盘转动过程中不可再次触发
				calculate_result: function(type, during_time) { //type:0,箭头转动,1,背景转动;during_time:持续时间(s)
					var self = this;
					type = type || 0; // 默认为箭头转动
					during_time = during_time || 1; // 默认为1s
					var rand_num = Math.ceil(Math.random() * 100); // 用来判断的随机数，1-100
					$.ajax({
						type:"POST",
						url:"/Mobile/Index/dial",
						dataType:"json",
						success:function(data){
							if(data.status == 1){
								if(data.data.level == 3){
									$("#price").html(data.data.num+"元");
								}
								zj=data.data.level;
								var rand_circle = Math.ceil(Math.random() * 2) + 1; // 附加多转几圈，2-3
								self.flag_click = false; // 旋转结束前，不允许再次触发
								if(type == 1) { // 转动盘子
									if(zj==1){
										self.rotate_angle=self.rotate_angle - rand_circle * 360 - 0 - self.rotate_angle % 360

									}else if(zj==2){
										self.rotate_angle=self.rotate_angle - rand_circle * 360 - 45 - self.rotate_angle % 360
									}else if(zj==3){
										self.rotate_angle=self.rotate_angle - rand_circle * 360 - 135 - self.rotate_angle % 360
									}else if(zj==4){
										self.rotate_angle=self.rotate_angle - rand_circle * 360 - 90 - self.rotate_angle % 360
									}else if(zj==5){
										self.rotate_angle=self.rotate_angle - rand_circle * 360 - 270 - self.rotate_angle % 360
									}
									setTimeout(function() {
										self.flag_click = true;
										$('#apply'+zj).modal("show");
										$(".coud_num").html(data.data.pay_points);
										if(parseInt(nun1) < 500) {
											$("#tip").attr("src", "images/Pointer2.png");
											return false;
										}
									}, during_time * 1000);
									$('#img').css({
										'transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-ms-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-webkit-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-moz-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-o-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'transition': 'transform ease-out ' + during_time + 's',
										'-moz-transition': '-moz-transform ease-out ' + during_time + 's',
										'-webkit-transition': '-webkit-transform ease-out ' + during_time + 's',
										'-o-transition': '-o-transform ease-out ' + during_time + 's'
									});
								} else { // 转动指针
									$('.i_cont').css({
										'transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-ms-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-webkit-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-moz-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'-o-transform': 'rotate(' + self.rotate_angle + 'deg)',
										'transition': 'transform ease-out ' + during_time + 's',
										'-moz-transition': '-moz-transform ease-out ' + during_time + 's',
										'-webkit-transition': '-webkit-transform ease-out ' + during_time + 's',
										'-o-transition': '-o-transform ease-out ' + during_time + 's'
									});
								}
							}else if(data.status == -1){
								alert(data.msg);
								location.href="/mobile/user/login";
							}
							else{
								alert(data.msg);
							}
							
						}
					});
					var result_index; // 最终要旋转到哪一块，对应result_angle的下标
					var start_pos = end_pos = 0; // 判断的角度值起始位置和结束位置
				}
			}
			$(document).ready(function() {
				$('#tip').click(function() {
					var user_id = {$user_id};
					if(user_id == 0){
						alert("您未登陆,请先登陆");
						location.href="/mobile/user/login";
						return;
					}
					if(parseInt(nun1) < 500) {
						alert("银酒币不足");
						$("#tip").attr("src", "/public/images/dial/Pointer2.png");
						return false;
					}
					if(rotate.flag_click) { // 旋转结束前，不允许再次触发
						rotate.calculate_result(1,1);
					}
				});

			});

			$(".close2").click(function() {
				$('#myModal').modal("hide");
			});
		</script>
	</body>

</html>